<template>
  <div class="app-container">
    <AppMenu v-if="!inFrame" class="app-container__nav" />
    <main class="app-container__main">
      <RouterView />
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import AppMenu from './components/AppMenu.vue'

export default defineComponent({
  name: 'App',
  components: { AppMenu },

  setup() {
    return {
      inFrame: window !== window.parent
    }
  }
})
</script>

<style lang="scss" scoped>
.app-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  &__nav {
    flex: none;
  }

  &__main {
    position: relative;
    flex: auto;
    height: 100%;
  }
}
</style>
